<template>
	<view class="container">
		<!-- 顶部操作栏 -->
		<view class="header-section">
			<view class="header-info">
				<text class="header-title">签到签退管理</text>
				<text class="header-subtitle">管理学生到离校记录</text>
			</view>
		</view>

		<!-- 今日统计 -->
		<view class="stats-section">
			<view class="stats-grid">
				<view class="stat-card">
					<view class="stat-icon checkin-icon">
						<text class="icon-text">✅</text>
					</view>
					<view class="stat-content">
						<text class="stat-number">{{ stats.todayCheckins }}</text>
						<text class="stat-label">今日签到</text>
					</view>
				</view>
				<view class="stat-card">
					<view class="stat-icon checkout-icon">
						<text class="icon-text">🚪</text>
					</view>
					<view class="stat-content">
						<text class="stat-number">{{ stats.todayCheckouts }}</text>
						<text class="stat-label">今日签退</text>
					</view>
				</view>
				<view class="stat-card">
					<view class="stat-icon total-icon">
						<text class="icon-text">👥</text>
					</view>
					<view class="stat-content">
						<text class="stat-number">{{ stats.totalStudents }}</text>
						<text class="stat-label">总学生数</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'all' }"
					@click="setFilter('all')"
				>
					<text class="tab-text">全部学生</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'checked-in' }"
					@click="setFilter('checked-in')"
				>
					<text class="tab-text">已签到</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'checked-out' }"
					@click="setFilter('checked-out')"
				>
					<text class="tab-text">已签退</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: currentFilter === 'not-checked-in' }"
					@click="setFilter('not-checked-in')"
				>
					<text class="tab-text">未签到</text>
				</view>
			</view>
		</view>

		<!-- 学生列表 -->
		<view class="student-list">
			<view class="list-header">
				<text class="list-title">学生列表</text>
				<text class="list-count">共 {{ filteredStudents.length }} 人</text>
			</view>
			
			<view v-if="!loading && filteredStudents && filteredStudents.length > 0">
				<view class="student-item" v-for="student in filteredStudents" :key="student.id">
					<view class="student-info">
						<image class="student-avatar" :src="student.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
						<view class="student-details">
							<text class="student-name">{{ student.name || student.studentName || '未知姓名' }}</text>
							<text class="student-phone">{{ student.phone || student.parentPhone || '未知手机号' }}</text>
							<view class="student-hours">
								<text class="hours-item">总课时: {{ student.totalHours || 0 }}</text>
								<text class="hours-item">已用: {{ student.usedHours || 0 }}</text>
								<text class="hours-item remaining">剩余: {{ student.remainingHours || 0 }}</text>
							</view>
							<view class="attendance-status">
								<text class="status-label">今日状态:</text>
								<text class="status-text" :class="student.todayStatus">{{ getStatusText(student.todayStatus) }}</text>
							</view>
						</view>
					</view>
					<view class="student-actions">
						<button 
							class="action-btn checkin-btn" 
							:class="{ disabled: student.todayStatus === 'checked-in' }"
							@click="checkIn(student)"
							:disabled="student.todayStatus === 'checked-in'"
						>
							签到
						</button>
						<button 
							class="action-btn checkout-btn" 
							:class="{ disabled: student.todayStatus !== 'checked-in' }"
							@click="checkOut(student)"
							:disabled="student.todayStatus !== 'checked-in'"
						>
							签退
						</button>
						<button class="action-btn history-btn" @click="viewHistory(student)">记录</button>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view v-else-if="loading" class="loading-state">
				<view class="loading-icon">⏳</view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">📝</view>
				<text class="empty-title">暂无学生</text>
				<text class="empty-desc">当前筛选条件下没有学生数据</text>
			</view>
		</view>

		<!-- 签到签退确认弹窗 -->
		<view class="confirm-modal" v-if="showConfirmModal">
			<view class="confirm-content">
				<text class="confirm-title">{{ confirmAction === 'checkin' ? '确认签到' : '确认签退' }}</text>
				<text class="confirm-text">
					{{ confirmAction === 'checkin' ? '确定要为' : '确定要为' }}
					<text class="student-name-highlight">{{ selectedStudent.name || selectedStudent.studentName || '该学生' }}</text>
					{{ confirmAction === 'checkin' ? '进行签到吗？' : '进行签退吗？' }}
				</text>
				<text class="confirm-warning" v-if="confirmAction === 'checkout'">
					签退后将自动扣减1课时
				</text>
				<view class="confirm-actions">
					<button class="cancel-btn" @click="showConfirmModal = false">取消</button>
					<button class="confirm-btn" @click="confirmAttendanceAction" :disabled="submitting">
						<text v-if="submitting">处理中...</text>
						<text v-else>确定</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 历史记录弹窗 -->
		<view class="history-modal" v-if="showHistoryModal">
			<view class="history-content">
				<view class="history-header">
					<text class="history-title">{{ selectedStudent.name || selectedStudent.studentName || '学生' }} - 签到记录</text>
					<view class="close-btn" @click="showHistoryModal = false">
						<text class="close-icon">×</text>
					</view>
				</view>
				<view class="history-list">
					<view class="history-item" v-for="record in attendanceHistory" :key="record.id">
						<view class="history-info">
							<text class="history-type" :class="record.type">{{ record.type === 'sign-in' ? '签到' : '签退' }}</text>
							<text class="history-time">{{ formatDateTime(record.time) }}</text>
						</view>
						<text class="history-admin">操作人: {{ record.adminName }}</text>
						
						<!-- 课时变动信息 -->
						<view class="hours-change" v-if="record.type === 'sign-out'">
							<view class="hours-info">
								<text class="hours-label">课时变动:</text>
								<text class="hours-before">{{ record.beforeHours }}课时</text>
								<text class="hours-arrow">→</text>
								<text class="hours-after">{{ record.afterHours }}课时</text>
								<text class="hours-deducted" v-if="record.hoursDeducted > 0">(-{{ record.hoursDeducted }})</text>
							</view>
						</view>
						
						<!-- 备注信息 -->
						<text class="history-notes" v-if="record.notes">{{ record.notes }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getApiUrl, API_CONFIG, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			loading: false,
			submitting: false,
			currentFilter: 'all',
			showConfirmModal: false,
			showHistoryModal: false,
			confirmAction: '',
			selectedStudent: {},
			stats: {
				todayCheckins: 0,
				todayCheckouts: 0,
				totalStudents: 0
			},
			studentList: [],
			attendanceHistory: []
		}
	},
	computed: {
		filteredStudents() {
			switch (this.currentFilter) {
				case 'checked-in':
					return this.studentList.filter(s => s.todayStatus === 'checked-in')
				case 'checked-out':
					return this.studentList.filter(s => s.todayStatus === 'checked-out')
				case 'not-checked-in':
					return this.studentList.filter(s => s.todayStatus === 'not-checked-in')
				default:
					return this.studentList
			}
		}
	},
	onLoad() {
		this.loadStudentList()
	},
	methods: {
		async loadStudentList() {
			this.loading = true
			try {
				const token = uni.getStorageSync('token')
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_STUDENTS),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				console.log('学生列表API响应:', response)

				if (response.code === 200) {
					this.studentList = response.data || []
					console.log('学生列表加载成功，共', this.studentList.length, '人')
					
					// 调试：打印第一个学生的数据结构
					if (this.studentList.length > 0) {
						console.log('第一个学生数据结构:', this.studentList[0])
						console.log('学生字段检查:', {
							id: this.studentList[0].id,
							name: this.studentList[0].name,
							studentName: this.studentList[0].studentName,
							phone: this.studentList[0].phone,
							parentPhone: this.studentList[0].parentPhone,
							totalHours: this.studentList[0].totalHours,
							remainingHours: this.studentList[0].remainingHours
						})
					}
					
					// 获取今日签到状态
					await this.loadTodayAttendanceStatus()
				} else {
					uni.showToast({
						title: response.message || '获取学生列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载学生列表失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		async loadTodayAttendanceStatus() {
			try {
				const token = uni.getStorageSync('token')
				const today = new Date().toISOString().split('T')[0]
				
				const todayResponse = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.ATTENDANCE_TODAY) + `?date=${today}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})
				
				console.log('今日签到数据:', todayResponse)
				
				if (todayResponse.code === 200 && todayResponse.data) {
					// 创建签到状态映射表，处理同一学生多条记录的情况
					const attendanceMap = new Map()
					
					// 按学生分组，找到每个学生的最新状态
					const studentRecords = {}
					todayResponse.data.forEach(attendance => {
						if (!studentRecords[attendance.studentId]) {
							studentRecords[attendance.studentId] = []
						}
						studentRecords[attendance.studentId].push(attendance)
					})
					
					// 为每个学生确定最新状态
					Object.keys(studentRecords).forEach(studentIdStr => {
						const studentId = parseInt(studentIdStr)
						const records = studentRecords[studentIdStr]
						
						// 按时间排序，获取最新记录
						records.sort((a, b) => {
							const timeA = new Date(a.signInTime || a.signOutTime || 0)
							const timeB = new Date(b.signInTime || b.signOutTime || 0)
							return timeB - timeA // 降序，最新的在前
						})
						
						const latestRecord = records[0]
						let status = 'not-checked-in'
						
						if (latestRecord.status) {
							const statusStr = latestRecord.status.toString().toLowerCase()
							if (statusStr === 'signed-in') {
								status = 'checked-in'
							} else if (statusStr === 'signed-out') {
								status = 'checked-out'
							}
						}
						
						attendanceMap.set(studentId, status)
						console.log(`学生${studentId}最新状态: ${latestRecord.status} -> ${status}`)
					})
					
					// 更新学生状态
					this.studentList.forEach(student => {
						const attendanceStatus = attendanceMap.get(student.id)
						student.todayStatus = attendanceStatus || 'not-checked-in'
						console.log(`更新学生${student.id}(${student.name || student.studentName})状态: ${student.todayStatus}`)
					})
				}
				
				// 获取今日统计
				const statsResponse = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.ATTENDANCE_STATS) + `?date=${today}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})
				
				if (statsResponse.code === 200) {
					this.stats.todayCheckins = statsResponse.data.signedInCount || 0
					this.stats.todayCheckouts = statsResponse.data.signedOutCount || 0
				}
			} catch (error) {
				console.error('加载今日签到状态失败:', error)
				// 如果API不存在，设置默认状态
				this.studentList.forEach(student => {
					student.todayStatus = 'not-checked-in'
				})
			}
			
			this.calculateStats()
		},
		
		calculateStats() {
			this.stats.totalStudents = this.studentList.length
		},
		
		setFilter(filter) {
			this.currentFilter = filter
		},
		
		getStatusText(status) {
			switch (status) {
				case 'checked-in':
					return '已签到'
				case 'checked-out':
					return '已签退'
				default:
					return '未签到'
			}
		},
		
		checkIn(student) {
			this.selectedStudent = student
			this.confirmAction = 'checkin'
			this.showConfirmModal = true
		},
		
		checkOut(student) {
			this.selectedStudent = student
			this.confirmAction = 'checkout'
			this.showConfirmModal = true
		},
		
		async confirmAttendanceAction() {
			if (this.submitting) return
			
			this.submitting = true
			try {
				const token = uni.getStorageSync('token')
				const action = this.confirmAction
				
				const response = await apiRequest({
					url: getApiUrl(action === 'checkin' ? API_CONFIG.ENDPOINTS.ATTENDANCE_SIGNIN : API_CONFIG.ENDPOINTS.ATTENDANCE_SIGNOUT),
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					},
					data: {
						studentId: this.selectedStudent.id
					}
				})

				if (response.code === 200) {
					// 更新学生状态
					const student = this.studentList.find(s => s.id === this.selectedStudent.id)
					if (student) {
						if (action === 'checkin') {
							student.todayStatus = 'checked-in'
							uni.showToast({
								title: '签到成功',
								icon: 'success'
							})
						} else {
							student.todayStatus = 'checked-out' // 修复：签退后状态应为已签退
							// 更新课时信息
							if (response.data && response.data.updatedHours) {
								student.remainingHours = response.data.updatedHours.remainingHours
								student.usedHours = response.data.updatedHours.usedHours
							}
							uni.showToast({
								title: response.message || '签退成功',
								icon: 'success'
							})
						}
					}
					
					this.calculateStats()
				} else {
					uni.showToast({
						title: response.message || '操作失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('签到签退操作失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.submitting = false
				this.showConfirmModal = false
			}
		},
		
		async viewHistory(student) {
			this.selectedStudent = student
			this.showHistoryModal = true
			
			try {
				const token = uni.getStorageSync('token')
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.ATTENDANCE_LOGS_STUDENT) + `/${student.id}`,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (response.code === 200) {
					// 转换日志格式为前端显示格式
					this.attendanceHistory = response.data.map(log => ({
						id: log.id,
						type: log.actionType ? log.actionType.toLowerCase().replace('_', '-') : 'unknown', // 修复：正确转换actionType格式
						time: log.actionTime,
						adminName: log.adminName || '管理员',
						hoursDeducted: log.hoursDeducted || 0,
						beforeHours: log.beforeRemainingHours || 0,
						afterHours: log.afterRemainingHours || 0,
						notes: log.notes || ''
					}))
				} else {
					this.attendanceHistory = []
				}
			} catch (error) {
				console.error('加载签到签退日志失败:', error)
				this.attendanceHistory = []
				uni.showToast({
					title: '加载记录失败',
					icon: 'none'
				})
			}
		},
		
		formatDateTime(date) {
			const d = new Date(date)
			return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #0B0F1A;
	padding: 40rpx;
}

.header-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
	
	.header-info {
		.header-title {
			display: block;
			font-size: 48rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		
		.header-subtitle {
			font-size: 28rpx;
			color: #AAB4BE;
		}
	}
}

.stats-section {
	margin-bottom: 40rpx;
	
	.stats-grid {
		display: flex;
		gap: 20rpx;
	}
	
	.stat-card {
		flex: 1;
		background: #1a1f2e;
		border: 1rpx solid #2a2f3e;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		
		.stat-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			
			.icon-text {
				font-size: 36rpx;
			}
			
			&.checkin-icon {
				background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
			}
			
			&.checkout-icon {
				background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
			}
			
			&.total-icon {
				background: linear-gradient(135deg, #2196F3 0%, #42A5F5 100%);
			}
		}
		
		.stat-content {
			.stat-number {
				display: block;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 4rpx;
			}
			
			.stat-label {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.filter-section {
	margin-bottom: 40rpx;
	
	.filter-tabs {
		display: flex;
		background: #1a1f2e;
		border: 1rpx solid #2a2f3e;
		border-radius: 12rpx;
		padding: 8rpx;
	}
	
	.filter-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx;
		border-radius: 8rpx;
		transition: all 0.3s;
		
		.tab-text {
			font-size: 28rpx;
			color: #AAB4BE;
		}
		
		&.active {
			background: #1976D2;
			
			.tab-text {
				color: #FFFFFF;
				font-weight: 500;
			}
		}
	}
}

.student-list {
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.list-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 500;
		}
		
		.list-count {
			font-size: 26rpx;
			color: #AAB4BE;
		}
	}
}

.student-item {
	background: #1a1f2e;
	border: 1rpx solid #2a2f3e;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	.student-info {
		display: flex;
		align-items: center;
		flex: 1;
		
		.student-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.student-details {
			.student-name {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.student-phone {
				display: block;
				font-size: 26rpx;
				color: #AAB4BE;
				margin-bottom: 8rpx;
			}
			
			.student-hours {
				display: flex;
				gap: 10rpx;
				margin-bottom: 8rpx;
				
				.hours-item {
					font-size: 24rpx;
					color: #AAB4BE;
				}
				
				.remaining {
					color: #FF5722;
					font-weight: 500;
				}
			}
			
			.attendance-status {
				display: flex;
				align-items: center;
				
				.status-label {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-right: 8rpx;
				}
				
				.status-text {
					font-size: 24rpx;
					font-weight: 500;
					
					&.not-checked-in {
						color: #FF5722;
					}
					
					&.checked-in {
						color: #4CAF50;
					}
					
					&.checked-out {
						color: #FF9800;
					}
				}
			}
		}
	}
	
	.student-actions {
		display: flex;
		gap: 12rpx;
		
		.action-btn {
			padding: 12rpx 20rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			border: none;
			
			&.checkin-btn {
				background: #4CAF50;
				color: #FFFFFF;
				
				&.disabled {
					background: #666;
					color: #999;
				}
			}
			
			&.checkout-btn {
				background: #FF9800;
				color: #FFFFFF;
				
				&.disabled {
					background: #666;
					color: #999;
				}
			}
			
			&.history-btn {
				background: #2196F3;
				color: #FFFFFF;
			}
		}
	}
}

.loading-state, .empty-state {
	text-align: center;
	padding: 100rpx 0;
	
	.loading-icon, .empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.loading-text, .empty-title {
		display: block;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 12rpx;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #AAB4BE;
	}
}

.confirm-modal, .history-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.confirm-content, .history-content {
	background: #1a1f2e;
	border: 1rpx solid #2a2f3e;
	border-radius: 16rpx;
	padding: 40rpx;
	margin: 40rpx;
	max-width: 600rpx;
	width: 100%;
	
	.confirm-title, .history-title {
		display: block;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.confirm-text {
		display: block;
		font-size: 28rpx;
		color: #AAB4BE;
		margin-bottom: 16rpx;
		
		.student-name-highlight {
			color: #1976D2;
			font-weight: 500;
		}
	}
	
	.confirm-warning {
		display: block;
		font-size: 26rpx;
		color: #FF5722;
		margin-bottom: 30rpx;
	}
	
	.confirm-actions {
		display: flex;
		gap: 20rpx;
		
		.cancel-btn, .confirm-btn {
			flex: 1;
			padding: 20rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
			border: none;
		}
		
		.cancel-btn {
			background: #666;
			color: #FFFFFF;
		}
		
		.confirm-btn {
			background: #1976D2;
			color: #FFFFFF;
		}
	}
}

.history-content {
	max-height: 600rpx;
	overflow-y: auto;
	
	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.close-btn {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #666;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.close-icon {
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.history-list {
		.history-item {
			background: #2a2f3e;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			
			.history-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8rpx;
				
				.history-type {
					font-size: 26rpx;
					font-weight: 500;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
					
					&.sign-in {
						background: #4CAF50;
						color: #FFFFFF;
					}
					
					&.sign-out {
						background: #FF9800;
						color: #FFFFFF;
					}
				}
				
				.history-time {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
			
			.history-admin {
				font-size: 24rpx;
				color: #AAB4BE;
			}
			
			.hours-change {
				margin-top: 10rpx;
				padding-top: 10rpx;
				border-top: 1rpx dashed #2a2f3e;
				
				.hours-info {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #AAB4BE;
					
					.hours-label {
						margin-right: 8rpx;
					}
					
					.hours-before, .hours-after {
						font-weight: 500;
						color: #FFFFFF;
					}
					
					.hours-arrow {
						margin: 0 8rpx;
						font-size: 24rpx;
						color: #AAB4BE;
					}
					
					.hours-deducted {
						color: #FF5722;
						font-weight: 500;
					}
				}
			}
			
			.history-notes {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #AAB4BE;
				word-break: break-all;
			}
		}
	}
}
</style> 